<template>
    <div>
        <div class="headerSearch">
            <div class="icon" @click="$router.go(-1)">
                <span class="iconfont icon-arrow-left-bold"></span>
            </div>
            <div class="search">
                <input type="text" placeholder="搜索歌曲、歌手" ref="input" @keyup.enter="getSearchFun" @focus="showFun(true)"/>
            </div>
        </div>

        <div class="content" v-show="!show">
            <div class="hotSearch container">
                <div class="title">热门搜索</div>
                <div class="hotlist">
                    <ul>
                        <li v-for="(item,index) in hots" :key="index" @click="hotsAdd(index)" ref="text">{{item.first}}</li>
                    </ul>
                </div>
            </div>

            <div class="history container" v-if="history.length > 0">
                <div class="hisTitle">
                    <div class="title fl">搜索历史</div>
                    <div class="icon fr" @click="delAll">X</div>
                </div>
                <div>
                    <ul>
                        <li v-for="(item,index) in history" :key="index">
                            <div class="name">{{item}}</div>
                            <div class="icon" @click="del(index)">X</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="content-list" v-show="show">
            <ul>
                <li v-for="(item,index) in resultSongs" :key="index" @click="playmusic(item.id,item.name,index)">
                    <div class="icon">
                        <p class="iconfont icon-search"></p>
                    </div>
                    <div class="text">
                        <p class="titles">{{item.name}}</p>
                        <span class="name" v-for="(item,index) in item.artists" :key="index">{{item.name}}</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import {getHot,getSearch} from "../../api/search"
export default {
    data() {
        return {
            hots:[],
            resultSongs:[],
            onfocus:"",
            show:false,
            history:[],
        }
    },
    methods:{
        getHotFun(){
            getHot().then((data)=>{
                this.hots = data.result.hots
                // console.log(this.hots)
            })
        },
        hotsAdd(index){
            this.$refs.input.value = this.$refs.text[index].innerText
            getSearch({keywords:this.$refs.input.value}).then(data=>{
                // console.log(data.result.songs)
                this.resultSongs = data.result.songs
            })
            this.show = true
        },
        del(index){
            this.history.splice(index,1)
        },
        delAll(){
            this.history.splice(0,this.history.length)
        },
        getSearchFun(){
            getSearch({keywords:this.$refs.input.value}).then(data=>{
                console.log(data.result.songs)
                this.resultSongs = data.result.songs
            })
            this.history.push(this.$refs.input.value)
        },
        playmusic(id,name,index){
            let playMusicData = {
                coverImgUrl: this.resultSongs[index].artists[0].img1v1Url,
                id,
                name,
                ar:this.resultSongs[index].artists,
                tracks:this.resultSongs
            }
            // 数据存储
          this.$store.commit("musicDatafun",playMusicData )
        },
        showFun(bol){
            // console.log(bol)
            this.show = bol
        }
    },
    created(){
        this. getHotFun()
    },
    directives:{
        focus:{
            inserted: function(el){
                el.focus()
            }
        }
    }
}
</script>

<style lang="less">
.content-list{
    ul{
        margin-top: 10px;
        li{
            height: 40px;
            border-bottom: 2px solid #E5E6E6;
            background: #fff;
            padding: 10px 22px;
            .icon{
                float:left;margin:10px 10px 0px 0px;
                p{
                    font-size:20px
                }
            }
            .text{
                float:left;
                width: 280px;
                p,span{
                    line-height: 16px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    margin: 0px;
                    padding: 0px;
                    &.titles{
                        font-size: 16px;
                    }
                    &.name{
                        font-size: 12px;
                    }
                }
            }
        }
    }
}


.container{
    margin: 10px 22px 0px 22px;
}
.title{
    height: 32px;
    line-height: 32px;
    font-size:16px;
    color: #808181;
}
.fl{
    float: left;
}
.fr{
    float: right;
}

.headerSearch{
    height: 40px;
    background: #D44439;
    color: #fff;
    .icon{
        float: left;
        width: 40px;
        line-height: 40px;
        font-size: 30px;
        text-align: center;
        .iconfont{
            font-size: 20px;
        }
    }
    .search{
        width: 80%;
        float: left;
        font-size: 16px;
        border-bottom: 1px solid #ccc;
        margin-top: 10px;
        input{
            line-height: 25px;
            outline: none;
            border: none;
            background: #D44439;
            &::placeholder {
                color: #fff;
            }
        }
        
    }
}

.content{
    .hotSearch{
    .hotlist{
        font-size: 16px;
        ul{
            overflow: hidden;
            li{
            float: left;
            border: 1px solid  #DFE0E0;
            margin-right: 10px;
            margin-bottom: 10px;
            padding: 2px 4px;
            border-radius: 4px;
            color: #262729;
            }
            }
        }
    }
    .history{
        .hisTitle{
            overflow: hidden;
        }
        ul{
            li{
                display: flex;
                justify-content:space-between; 
                font-size:16px;
                height: 30px;
                line-height: 30px;
            }
        }
    }
}


</style>